<template>

  <div>
    <div class="recharge-hd">账号预览</div>
    <div class="indent">
      <el-card class="box-card">
        <div slot="header" class="">
          <span style="color: #828282">账号详情</span>
        </div>
        <div class="item"><span>账号昵称：</span>{{myInfo.nickName}}</div>
        <div class="item"><span>手机号：</span>{{myInfo.mobile}}</div>
        <div class="item"><span>余额：</span><b style="color:#d1483f">￥{{myInfo.balancePrice}}</b></div>
        <!-- <div class="item"><span>是否实名：</span><i class="icon">{{myInfo.isReal==1?'已实名':'未实名'}}</i></div> -->

      </el-card>
      <!-- <el-card class="box-card">
        <div slot="header" class="">
          <span style="color: #828282">账号安全</span>
        </div>
        <el-progress type="circle" :percentage="25"></el-progress>
      </el-card> -->
    </div>

  </div>
</template>

<script>
export default {
  name: 'mySurvey',
  props: ['myInfo'],
  data () {
    return {}
  },
  computed: {},

  mounted () {},
  methods: {}
}
</script>

<style lang="less" scoped>
.icon {
  font-style: normal;
  color: #986e32;
  font-size: 12px;
  background: #ffe863;
  border: 1px #986e32 dashed;
  padding: 2px 3px;
  vertical-align: middle;
  white-space: nowrap;
}
.indent {
  display: flex;
  justify-content: space-between;
}
.box-card {
  width: 100%;
}
.item {
  margin-bottom: 10px;
  span {
    display: inline-block;
    width: 80px;
    color: #828282;
  }
}
.recharge-hd {
  border-left: 3px solid #d82141;
  padding: 2px 10px;
  margin-bottom: 30px;
}
</style>